<template>
  <div class="com-footer">
    <mt-tabbar v-model="selected">
		  <mt-tab-item :id="item.id" v-for="(item,index) in tabbarArray" :key="index" @click.stop.prevent="hehe">
		  	<template >
		      <img slot="icon" :src="selected==item.id?item.select_img:item.img">
		      <span>{{item.title}}</span>
		    </template>
		  </mt-tab-item>
		</mt-tabbar>
  </div>
</template>

<script type="text/javascript">
	export default{
    props: {
      selectedIndex: {
	      type: Number,
	      default: 0
	    },
    },
		data() {
			return{
				selected: null,
				tabbarArray: [
				  {
				  	id: '/a',
				  	title: '首页',
				  	img: require('@/assets/home-tabbar.png'),
				  	select_img: require('@/assets/select-home-tabbar.png')
				  },
				  {
				  	id: '/b',
				  	title: '最新',
				  	img: require('@/assets/home-tabbar.png'),
				  	select_img: require('@/assets/select-home-tabbar.png')
				  },
				  {
				  	id: '/c',
				  	title: '关注',
				  	img: require('@/assets/home-tabbar.png'),
				  	select_img: require('@/assets/select-home-tabbar.png')
				  },
				  {
				  	id: '/d',
				  	title: '我的',
				  	img: require('@/assets/home-tabbar.png'),
				  	select_img: require('@/assets/select-home-tabbar.png')
				  }
				],
				clickIndex: 0
			}
		},
		methods: {
			changeSelectedState() {
				if(this.clickIndex === 1) {
					this.$router.push(this.selected)
				}
				this.clickIndex = 1
			}
		},
		watch: {
		   selected: {
		      handler: 'changeSelectedState',
		      deep: true
		   }
		},
		mounted() {
			this.clickIndex = 0
			this.selected = this.tabbarArray[this.selectedIndex].id
		}

	}
</script>
<style type="text/css">
	
</style>
